<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="images/favicon.ico" rel="shortcut icon">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" href="css/zoomslider.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
    <style>
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }
    </style>
</head>
<body>
<!--/main-header-->
<!--/banner-section-->
<div id="demo-1"
     data-zs-src='["http://img.t6k.co/thumb/1_101903.jpg", "http://img.t6k.co/thumb/3_137858.jpg", "http://img.t6k.co/thumb/1_65206.jpg","http://img.t6k.co/thumb/2_219017.jpg"]'
     data-zs-overlay="dots">
    <div class="demo-inner-content">
        <!--/header-w3l-->
        <div class="header-w3-agileits" id="home">
            <div class="inner-header-agile">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <h1><a href="index.html"><span>M</span>ovies <span>P</span>ro</a></h1>
                    </div>
                    <!-- navbar-header -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    </div>
                    <div class="clearfix"></div>
                </nav>
                <div class="w3ls_search">
                    <div class="cd-main-header">
                        <ul class="cd-header-buttons">
                            <li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
                        </ul>
                    </div>
                    <div id="cd-search" class="cd-search">
                        <input name="search" id="search" type="search" placeholder="搜索...">
                    </div>
                </div>

            </div>
        </div>
        <div class="baner-info">
            <h3>Latest <span>On</span>Line <span>Mo</span>vies</h3>
            <h4>In space no one can hear you scream.</h4>
            <!--<a class="w3_play_icon1" href="#small-dialog1"></a>-->
        </div>
    </div>
</div>


<div class="w3_content_agilleinfo_inner">
    <div class="agile_featured_movies">
        <h3 class="agile_w3_title" id="allVideo" style="font-size: 1em;">所有视频 </h3>
        <div class="wthree_agile-requested-movies" id="videoList" style="font-size: 12px;"></div>
    </div>
</div>

<a href="#home" id="toTop" class="scroll" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
<script src="js/config.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.zoomslider.min.js"></script>
<script src="js/main.js"></script>
<script src="js/simplePlayer.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/doT.js" type="text/javascript"></script>
<script src="js/jquery,qrcode.min.js"></script>
<!--===========================视频列表模板内容======================================-->
<script id="videoListTemplate" type="text/x-dot-template">
    {{ for(var index in it.item) { }}
    <div class="col-md-2 w3l-movie-gride-agile requested-movies" style="background-color: #000000;">
        <a href="video.html?id={{=it.item[index].id}}" class="hvr-sweep-to-bottom" target="_blank">
            <img src="{{=it.item[index].coverImage}}" title="{{=it.item[index].title}}" class="img-responsive" alt=" ">
            <div class="w3l-action-icon"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
        </a>
        <div class="mid-1 agileits_w3layouts_mid_1_home">
            <div class="w3l-movie-text">
                <h7>
                    <a href="video.html?id={{=it.item[index].id}}" target="_blank" title="{{=it.item[index].title}}"
                       style="text-decoration:none;color: black;">
                        <b>{{=it.item[index].shortTitle}}</b>
                    </a>
                </h7>
            </div>
            <div class="mid-2 agile_mid_2_home">
                <p>{{=it.item[index].author}}</p>
                <div class="clearfix"></div>
                <p>{{=it.item[index].createdAt}}</p>
                <div class="clearfix"></div>
                <p>浏览：{{=it.item[index].viewNumber}}</p>
                <div class="clearfix"></div>
                <p><a href="javascript:void(0);" onclick="video.collect('{{=it.item[index].id}}')">收藏</a></p>
                <div class="clearfix"></div>

            </div>
            <!--<div class="mid-2 agile_mid_2_home">

            </div>-->
        </div>
    </div>
    {{ } }}
    <div class="clearfix"></div>
    <div class="blog-pagenat-wthree">
        <ul class="pagination">
            <li><a href="javascript:void(0);" onclick="video.loadVideoList('1')">&laquo;</a></li>
            {{ for(var p in it.pageArray) { }}


            {{? it.currentPage == it.pageArray[p] }}
            <li class="active"><a href="javascript:void(0);" onclick="video.loadVideoList('{{=it.pageArray[p]}}')">{{=it.pageArray[p]}}</a>
            </li>
            {{??}}
            <li><a href="javascript:void(0);"
                   onclick="video.loadVideoList('{{=it.pageArray[p]}}')">{{=it.pageArray[p]}}</a></li>
            {{?}}

            {{}}}
            <!--末页-->
            <li><a href="javascript:void(0);" onclick="video.loadVideoList('{{=it.totalPage}}')">&raquo;</a></li>
            <li><span style="border:0px;color: black;">跳转到：<input type="number" min="1" style="width: 80px;"
                                                                  id="gotopage"></span></li>
            <li><a href="javascript:void(0);">总共{{=it.total}}条，{{=it.totalPage}}页</a></li>

        </ul>

    </div>
</script>
<!--===========================导航模板内容======================================-->
<script id="navbarTemplate" type="text/x-dot-template">
    <ul class="nav navbar-nav">
        <li class="active"><a href="/">首页</a></li>
        <li><a href="/videolist.html">全部视频 </a></li>
        <li><a href="/cityvideolist.html" target="_blank">视频地域</a></li>
        <!--用户信息区-->
        {{? !it.status }}
        <li><a href="javascript:void(0);" onclick="openLoginForm();">登录</a></li>
        <li><a href="javascript:void(0);" onclick="openRegistForm();">注册</a></li>
        {{??}}
        <!--已经登录的情况-->
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">{{=it.detail.name}}<b
                    class="caret"></b></a>
            <ul class="dropdown-menu multi-column columns-3">
                <li>
                    <div class="col-sm-4">
                        <ul class="multi-column-dropdown">
                            <li><a href="video/collect.html" target="_blank">收藏视频</a></li>

                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0);" onclick="user.logout();">退出</a></li>
        {{?}}
    </ul>
</script>

<script>
    function colseLoading() {
        $('#loadWaiting').modal('hide');
    }

    function loading() {
        $('#loadWaiting').modal({backdrop: 'static', keyboard: false});
    }

    function scrollIntoViewTo(eId) {
        document.getElementById(eId).scrollIntoView(true);
        return false;
    }

    function openLoginForm() {
        $('#loginForm').modal({backdrop: 'static', keyboard: false});
    }

    function openRegistForm() {
        $('#regist').modal({backdrop: 'static', keyboard: false});
    }

    var user = {

        setUserInfoByTemplate: function (data) {
            var tmpl = doT.template($("#navbarTemplate").text());
            $("#bs-example-navbar-collapse-1").html(tmpl(data));
        },

        setUserInfo: function () {
            var userInfo = {status: false};
            var isLoginUrl = commons.routPath + '/auth/islogin';
            $.getJSON(isLoginUrl, function (responseData) {
                if (responseData.meta.code == '200') {
                    var isLogin = responseData.body.isLogin;
                    if (isLogin) {
                        //获取当前用户信息
                        userInfo.status = true;
                        var getUserInfoUrl = commons.routPath + '/user/loginuser';
                        $.getJSON(getUserInfoUrl, function (userDataResponse) {
                            if (userDataResponse.meta.code == '200') {
                                var userDetailInfo = userDataResponse.body.detail;
                                userInfo.detail = userDetailInfo;
                                user.setUserInfoByTemplate(userInfo);
                            } else {
                                user.setUserInfoByTemplate(userInfo);
                            }
                        })
                    } else {
                        user.setUserInfoByTemplate(userInfo);
                    }
                } else {
                    user.setUserInfoByTemplate(userInfo);
                }
            });
        },
        login: function () {
            var loginId = $("#loginId").val();
            var password = $("#password").val();
            //开始登录
            var action = commons.routPath + "/auth/login";
            $.ajax({
                type: "post",
                url: action,
                async: true,
                data: {loginId: loginId, password: password},
                dataType: 'json',
                success: function (response) {
                    if (response.meta.code == '200') {
                        //关闭登录模态框
                        $('#loginForm').modal('hide');
                        user.setUserInfo();
                    }
                }
            });
        },
        logout: function () {
            var logoutUrl = commons.routPath + '/auth/loginout';
            $.post(logoutUrl, {}, function (responsedata) {
                user.setUserInfo();
            })
        }
    }


    var video = {

        pageSize: 100,

        totalShowPageNumber: 8,


        get_hs_page: function (ThisPage, pageNumber) {
            var pageArray = new Array();
            var countPage;
            //page分割数量
            var pageFor = video.totalShowPageNumber;
            var pageSlipt = pageFor / 2;

            //总页数大于显示的页数
            if (pageNumber > pageFor) {
                if (ThisPage > pageSlipt) {	//如果当前页大于分割数量的一半就开始分页


                    if (ThisPage >= (pageNumber - pageSlipt)) {	//如果当前页大于等于总页数减去分割数量的一半
                        if (ThisPage == pageNumber) {		//如果当前页等于总页数不在往后加页数
                            countPage = (((ThisPage - pageSlipt) + pageFor) - pageSlipt);
                        } else {
                            countPage = (((ThisPage - pageSlipt) + pageFor) - pageSlipt + 1);
                        }
                    } else {
                        countPage = ((ThisPage - pageSlipt) + pageFor);
                    }

                    for (i = (ThisPage - pageSlipt); i <= countPage; i++) {
                        pageArray.push(i)
                    }
                } else {
                    for (i = 1; i < pageFor; i++) {
                        pageArray.push(i)
                    }
                }
            } else {		//原始的那种分页
                for (i = 1; i <= pageNumber; i++) {
                    pageArray.push(i)
                }
            }

            return pageArray;
        },
        collect: function (id) {
            var url = commons.routPath + "/video/" + id + "/collect";
            $.post(url, {}, function (response) {
                if (response.meta.code == '200') {
                    alert("操作成功")
                }
            });
        },
        getPathUrlParam: function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        loadVideoList: function (page) {

            var param = {
                pageSize: video.pageSize,
                page: page,
                cityId: video.getPathUrlParam("id")
            }
            var search = $("#search").val();
            if (search) {
                param.keyword = search;
            }
            $.ajax({
                type: "post",
                url: commons.routPath + "/video/list",
                async: true,
                data: JSON.stringify(param),
                dataType: 'json',
                contentType: 'application/json',
                beforeSend: function () {
                    loading();
                },
                success: function (data) {
                    scrollIntoViewTo('allVideo')
                    colseLoading();
                    if (data.meta.code === '200') {
                        var tmpl = doT.template($("#videoListTemplate").text());
                        // 将数据扔进templ中。并在DIV中显示出来
                        var datas = data.body;

                        var totalPage = Math.ceil(datas.total / video.pageSize);

                        var pageArray = video.get_hs_page(page, totalPage)
                        datas.currentPage = page;
                        datas.pageArray = pageArray;
                        datas.totalPage = totalPage;

                        $("#videoList").html(tmpl(datas));

                        var div = $(".agileits_w3layouts_mid_1_home").first()
                        var imgWd = div.width();
                        var height = imgWd * 0.75;
                        $(".img-responsive").width(imgWd);
                        $(".img-responsive").height(height);
                        $('#gotopage').bind('keyup', function (event) {
                            if (event.keyCode == "13") {
                                var page = $('#gotopage').val();
                                if (page) {
                                    video.loadVideoList(page);
                                }
                            }
                        });
                    }
                }
            });
        },
        setCity: function () {
            var id = video.getPathUrlParam("id");
            var url = commons.routPath + "/region/" + id;
            $.getJSON(url, function (cityInfo) {
                if (cityInfo.meta.code == '200') {
                    var cityInfo = cityInfo.body.city;
                    $("#allVideo").html(cityInfo.name);
                    $("title").html(cityInfo.name + "的所有视频");
                }
            })
        }
    }
    $(function () {
        user.setUserInfo();
        video.setCity();
        video.loadVideoList(1);
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
        $('#search').bind('keyup', function (event) {
            if (event.keyCode == "13") {
                video.loadVideoList(1);
            }
        });

    });
</script>


<div class="modal fade" id="loadWaiting">
    <div class="modal-dialog modal-sm" style="text-align: center;vertical-align: middle;">
        <img alt=""
             src=""/>
    </div>
</div>


<div class="modal fade" id="loginForm" tabindex="-1" role="dialog">

    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>登录</h4>
                <div class="login-form">
                    <input type="text" name="loginId" id="loginId" placeholder="账号" required>
                    <input type="password" name="password" id="password" placeholder="密码" required>
                    <div class="tp">
                        <input type="submit" value="登录" onclick="user.login();">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="regist" tabindex="-1" role="dialog">

    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>Register</h4>
                <div class="login-form">
                    <form action="#" method="post">
                        <input type="text" name="name" placeholder="Name" required="">
                        <input type="email" name="email" placeholder="E-mail" required="">
                        <input type="password" name="password" placeholder="Password" required="">
                        <input type="password" name="conform password" placeholder="Confirm Password" required="">
                        <div class="signin-rit">
							<span class="agree-checkbox">
								<label class="checkbox"><input type="checkbox" name="checkbox">I agree to your <a
                                        class="w3layouts-t" href="#" target="_blank">Terms of Use</a> and <a
                                        class="w3layouts-t" href="#" target="_blank">Privacy Policy</a></label>
							</span>
                        </div>
                        <div class="tp">
                            <input type="submit" value="REGISTER NOW">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>